Auth0を使ってGoogleのソーシャルログイン機能を試す #Auth0JP #Auth0アドカレ

Auth0でGoogleログイン！

認証認可サービス「Auth0」は様々な接続方式に対応した、とても簡単に使えることが特長のサービスです。

Auth0アドベントカレンダーでは、その手軽さをお伝えすべく、Auth0が持つ様々な機能をご紹介できればと思います。

本記事ではAuth0のGoogle連携を使って Googleのソーシャルログイン機能 を試してみました！

• Add Google Login to Your App

Google連携はデフォルトで有効

Google連携はなんと、簡単に試せるようにテナント作成時にデフォルトで有効化されています。「！」マークがその証です。

しかしながらこの設定はあくまでも初期開発用のため、リフレッシュ時にログインが維持できないなどの制約があります。

• Auth0のサンプルアプリケーション（JS）で Google ログインした場合にトークンが取得できない問題の回避 ｜ Developers.IO

本番利用で使う場合は正式な設定を行う必要があります。

Sign in with Googleの準備

Google API Consoleを開きます。必要な場合は新しいプロジェクトを作成しましょう。

• https://console.developers.google.com/apis/dashboard

「認証情報」メニューを選び、「認証情報を作成」をクリックします。ドロップダウンメニューの中から「OAuthクライアント ID」を選びます。

OAuth同意画面を設定する必要があるので、設定します。

OAuth同意画面設定画面では、Sign in with Gooleをユーザーが行う際の認可画面にどのようなスコープを乗せるかなど、細やかな設定が行えます。全ての項目を埋める必要がありませんが、アプリケーション名は設定しましょう。

もっとも重要なポイントは「承認済みドメイン」にAuth0（auth0.com）を設定することです。これは、Sign in with Googleが意図したドメイン経由で呼び出されているかの証明のために必要な項目となっています。これを設定しないとAuth0ドメインとのやり取りが成功しません。

次にOAuthクライアントIDの作成に戻ります。「ウェブアプリケーション」を選びます。また、制限事項も埋めていきます。

項目	値
アプリケーションの種類	ウェブアプリケーション
承認済みJavaScript生成元	https://【テナント名】.auth0.com
承認済みのリダイレクトURI	https://【テナント名】.auth0.com/login/callback

OAuthのクライアントID、クライアントシークレットが取得できます。控えておきましょう。

Auth0の設定

Googleの設定には、先ほど控えておいたClient IDとClient Secretを設定します。

これだけです！

試す

以上で設定が完了です。「TRY」をクリックしてみると、以下のようにログインが成功します。

「!」マークも無事に外れました。

Googleのソーシャルログインを採用するメリット

やはりGmailは圧倒的なシェアがあるかと思います。例えばGmailを使っている以上、使っている人はほぼGoogleアカウントにログイン状態となります。PC向けのWebアプリでGoogleのソーシャルログインを組み込むことは効果的です。ユーザーにとって非常に便利に使っていただけると思います。

また、余談ですがAuth0アドベントカレンダーはまだまだ空きがありますので、絶賛募集中です。ぜひお気軽にご参加ください。